<template>
	<view class="bg-red-500  min-h-screen pb-10 share-wrapper">
		<u-navbar title="分享有礼" @rightClick="rightClick" :autoBack="true" leftIconColor="#fff">
		</u-navbar>
		<image style="margin-top: 100px;" src="/static/ymq_canyino2o/fxyl.png" class="w-full h-80" mode="scaleToFill">
		</image>

		<view class="" style="width: 95%;margin: 20rpx auto;border-radius: 40rpx;padding: 20rpx;background: #fff;">

			<view class="w-full px-4">
				<view class="bg-white rounded-lg p-4 mb-4 text-center">
					<view>
						送好友最高 <text
							class="font-bold text-2xl mx-1 text-red-500 text-center">{{ share_activity_config.shared_coupons_red_money }}</text>
						红包, TA注册你也将获取
					</view>
					<view class="mt-2">
						￥<text
							class="font-bold text-4xl text-red-500 text-center">{{ share_activity_config.share_coupons_red_money }}</text>
					</view>
					<view class="mt-2" style="width: 90%;margin: 20rpx auto;border-radius: 40rpx;">
						<button @click="copyShareUrl"
							style="border-radius: 50rpx;"
							class="block w-full text-center bg-yellow-400 text-white font-bold py-1 px-4 rounded cursor-pointer">
							复制分享链接给朋友
						</button>
					</view>
				</view>
			</view>

			<view class="w-full px-4 flex gap-2 justify-between items-center" style="background: #FFF9EB;border-radius: 10rpx;padding: 30rpx 0;">
				<view class="flex-1 rounded-lg p-4 mb-4 text-center">
					<view class="text-gray-600 text-base mb-2">已邀请好友</view>
					<view class="text-gray-600 text-4xl mb-2">
						<text class="text-gray-600 text-4xl" style="color: #FD4A16;font-weight: 600;">{{ invite_count }}</text>
						<text class="text-gray-600 text-base" style="color: #FD4A16;">人</text>
					</view>
				</view>

				<view class="flex-1 rounded-lg p-4 mb-4 text-center">
					<view class="text-gray-600 text-base mb-2">已获得红包</view>
					<view class="text-gray-600 text-4xl mb-2">
						<!-- <text class="text-gray-600 text-base">￥</text> -->
						<text class="text-gray-600 text-4xl" style="color: #FD4A16;font-weight: 600;">{{ red_packet_total }}</text>
						<text class="text-gray-600 text-base" style="color: #FD4A16;">元</text>
					</view>
				</view>
			</view>


			<view v-if="share_activity_config!=null" class="w-full px-4">
				<view class="bg-white rounded-lg p-4 mb-4">
					<view class="text-gray-600 text-xl mb-2" style="text-align: center;font-weight: 600;margin-top: 20rpx;">活动规则</view>
					<view class="text-gray-600 text-base">
						{{share_activity_config.activity_content}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				invite_count: 0, //邀请用户数量
				red_packet_total: 0, //累计红包金额

				share_activity_config: {
					share_coupons_red_money: 0,
					shared_coupons_red_money: 0,
					activity_content: "规则加载中...",
				},
			};
		},
		mounted() {
			this.share_activity_info();
			this.load_share_config();
		},
		methods: {
			rightClick() {
				uni.navigateBack(1)
			},
			share_activity_info() {
				//分享列表 entry/wxapp/share_activity_info
				var user_id = uni.getStorageSync('users').id
				app.globalData.util.request({
					url: 'entry/wxapp/share_activity_info',
					cachetime: '0',
					data: {
						user_id: user_id
					},
					success: (t) => {
						console.log("t", t)
						this.invite_count = t.data.data.invite_count
						this.red_packet_total = t.data.data.red_packet_total
					}
				})
			},
			share_activity_log() {
				//分享列表 entry/wxapp/share_activity_log
			},
			load_share_config() {
				if (uni.getStorageSync('share_activity_config')) {
					this.share_activity_config = uni.getStorageSync('share_activity_config');
				}
				var user_id = uni.getStorageSync('users').id
				app.globalData.util.request({
					url: 'entry/wxapp/share_activity_config',
					cachetime: '0',
					data: {
						user_id: user_id
					},
					success: (t) => {
						this.share_activity_config = t.data.data
						uni.setStorageSync('share_activity_config', t.data.data)
					}
				})
			},
			copyShareUrl() {
				var user_id = uni.getStorageSync('users').id
				uni.setClipboardData({
					data: app.globalData.siteinfo.domain_root +
						'/addons/ymq_canyino2o/dy_share/app_dwonload.html?share_id=XMF' + user_id,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							duration: 2000
						})
					}
				});
			}
		},
	};
</script>

<style>
	/* 在这里可以添加额外的样式，如果需要的话 */
</style>
<style scoped lang="scss">
	.share-wrapper {
		background: linear-gradient(1deg, #FFBE67, #FF6031, #FF6031);

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background-color: transparent !important;
		}

		::v-deep .u-navbar__content__title {
			color: #fff;
		}
	}
</style>